<template>
  <div class="api-test">
    <h2>API 测试</h2>
    <el-button @click="testApi" type="primary">测试 Banner API</el-button>
    <div v-if="loading" class="loading">
      <el-loading-spinner></el-loading-spinner>
      <span>加载中...</span>
    </div>
    <div v-else-if="error" class="error">
      <el-alert :message="error" type="error" show-icon></el-alert>
    </div>
    <div v-else-if="response" class="response">
      <el-card>
        <template #header>
          <div class="card-header">
            <span>API 响应结果</span>
          </div>
        </template>
        <pre>{{ response }}</pre>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { getBanner } from '@/api';

const loading = ref(false);
const error = ref('');
const response = ref('');

const testApi = async () => {
  loading.value = true;
  error.value = '';
  response.value = '';
  
  try {
    let params = {
      location: 'home'
    }
    const res = await getBanner(params);
    console.log("res", res);
    
    response.value = JSON.stringify(res, null, 2);
  } catch (err) {
    error.value = `请求失败: ${err.message || '未知错误'}`;
    console.error('API请求错误:', err);
  } finally {
    loading.value = false;
  }
};
</script>

<style scoped>
.api-test {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.loading {
  margin-top: 20px;
  text-align: center;
  padding: 20px;
}

.error {
  margin-top: 20px;
}

.response {
  margin-top: 20px;
}

pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  background-color: #f5f5f5;
  padding: 15px;
  border-radius: 4px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>